/**
*  描述：main
*/
<style lang="scss" scoped>
  @import 'src/styles/vars';
  @import 'src/styles/mixins';
  .main-box {
    @include wh(100%, 100%);
    position: relative;
    overflow: hidden;
    .content-left {
      @include wh(auto, 100%);
      position: relative;
      transition: all 0.5s;
      margin: 0 0 0 220px;
      padding-top: 55px;
      .main {
        @include wh(100%, 100%);
        overflow: auto;
        background: #f1f1f1;
      }
      &.content-an {
        margin:0 0 0 0px;
      }
    }
  }
  // 动画
  .slide-both-enter-active,
  .slide-both-leave-active {
    transition: all 0.3s;
  }
  .slide-both-enter {
    opacity: 0;
    transform: scale3d(0.95, 0.95, 0.95);
  }
  .slide-both-leave-to {
    opacity: 0;
    transform: scale3d(0.95, 0.95, 0.95);
  }
</style>
<template>
  <div class="main-box">
    <!--导航-->
    <mge-sidebar></mge-sidebar>
    <div class="content-left" :class="classes">
      <!--头部-->
      <mge-header></mge-header>
      <!--内容部分-->
      <div class="main">
        <transition name="slide-both" mode="out-in">
          <router-view></router-view>
        </transition>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex';
  import mgeHeader from '@/components/header/mgeHeader';
  import mgeSidebar from '@/components/sidebar/mgeSidebar';
  const prefixCls = 'content';

  export default {
    name: 'mgeMain',
    computed: {
      ...mapState([
        'sidebar_an'
      ]),
      classes () {
        return {
          [`${prefixCls}-an`]: this.sidebar_an
        };
      }
    },
    components: {
      mgeHeader,
      mgeSidebar
    }
  };
</script>
